跳到主要内容

页面缩放怎么做，并且按窗口记住？

考察点​

  • setZoomFactor 和 webFrame.setZoomLevel 的差别
  • 缩放状态存在哪

参考答案​

1. 用主进程设缩放​

function applyZoom(win, factor) {
  const next = Math.min(1.5, Math.max(0.8, factor));
  win.webContents.setZoomFactor(next);
  return next;
}

ipcMain.handle('zoom:set', (event, factor) => {
  const win = BrowserWindow.fromWebContents(event.sender);
  const next = applyZoom(win, factor);
  // 按窗口业务 key 存，而不是所有窗口共用一个值
  store.set(`zoom.${win.kind}`, next);
  return next;
});

setZoomFactor(1) 是 100%，1.2 是 120%。用倍数比 setZoomLevel 的指数级别更好向用户解释。

在创建窗口并 ready-to-show 之前设好，避免先以 100% 画一帧再跳变。

2. 为什么少在页面里用 webFrame​

webFrame.setZoomLevel 能在渲染进程改缩放，但：

  • 每个页面都要自己调，新窗口会漏
  • preload 在 sandbox 里不一定方便拿 webFrame 做持久化
  • 和系统 Ctrl+加号 两套缩放手感会叠在一起

Ctrl 加滚轮、Ctrl+加号如果要自定义，在 before-input-event 里拦截后调用上面的 applyZoom，否则 Chromium 默认缩放和你存的值会打架。拦截前想清楚：用户会习惯浏览器的缩放快捷键，拦掉就要自己提供菜单项。

3. 记住的范围​

  • 主界面和设置可以不同缩放，key 分开
  • 存在 userData 的 store 里，不要写进安装目录
  • 第二个显示器 DPI 不同时，Electron 的 factor 是相对该窗口的，一般不用再乘 devicePixelRatio

限制在 0.8 到 1.5，避免用户放到看不清或布局溢出后找不到入口。菜单里留“重置为 100%”。

面试话术​

缩放用 webContents.setZoomFactor，在显示窗口前设上一次，避免闪动。数值按窗口类型存在 userData。范围夹在 0.8 到 1.5，并提供重置。默认的 Ctrl 加号如果保留，就不要再写一套页面里的 webFrame 缩放和它抢。

常见追问​

  • zoomFactor 和 CSS zoom 比呢？ CSS zoom 不缩放所有布局单位，也影响截图和点击坐标。整页缩放用 webContents。
  • 子 WebContentsView 会继承吗？ 不会。每个 webContents 各自 setZoomFactor。